<!-- src/views/home/Carousel.vue -->
<template>
  <div class="carousel-container">
    <el-carousel :interval="4000" height="400px" :autoplay="true" indicator-position="outside">
      <el-carousel-item v-for="product in featuredProducts" :key="product.id">
        <el-card 
          class="carousel-card" 
          :body-style="{ padding: '0px', height: '100%' }"
          shadow="never"
        >
          <div class="image-container">
            <el-image 
              :src="product.image" 
              fit="cover"
              class="carousel-image"
            />
            <div class="content-overlay">
              <h2 class="product-title">{{ product.title }}</h2>
              <p class="product-description">{{ product.description }}</p>
              <div class="price-action">
                <span class="product-price">${{ product.price.toFixed(2) }}</span>
                <el-button 
                  type="primary" 
                  @click="navigateToProduct(product.id)"
                  class="view-button"
                >
                  View Details
                </el-button>
              </div>
            </div>
          </div>
        </el-card>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useProductStore } from '@/stores/products'

const router = useRouter()
const store = useProductStore()
const featuredProducts = store.getFeaturedProducts

const navigateToProduct = (productId: number) => {
  router.push(`/product/${productId}`)
}
</script>

<style scoped>
.carousel-container {
  width: 100%;
  margin: 0 auto;
}

.carousel-card {
  height: 100%;
  border: none;
}

.image-container {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.image-container:hover .carousel-image {
  transform: scale(1.05);
}

.content-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;
  padding: 2rem;
}

.product-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.product-description {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.price-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-price {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--el-color-warning);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.view-button {
  padding: 12px 24px;
  font-size: 1.1rem;
}

:deep(.el-carousel__indicators) {
  transform: translateY(1rem);
}

:deep(.el-carousel__indicator) {
  padding: 12px 4px;
}

:deep(.el-carousel__button) {
  width: 30px;
  height: 3px;
  background-color: var(--el-color-primary);
  opacity: 0.6;
  border-radius: 3px;
}

:deep(.el-carousel__indicator.is-active .el-carousel__button) {
  opacity: 1;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .product-title {
    font-size: 1.5rem;
  }

  .product-description {
    font-size: 1rem;
  }

  .product-price {
    font-size: 1.2rem;
  }

  .view-button {
    padding: 8px 16px;
    font-size: 1rem;
  }

  .content-overlay {
    padding: 1.5rem;
  }
}
</style> 